<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../script/jquery-3.5.1.js"></script>
    <style type="text/css">
        #addForm input,#updateForm input{
            width:50%;
        }
        #addForm,#updateForm{
            padding: 20px 0px;
        }
        #addForm p,#updateForm p{
            margin-top: 10px;
        }
    </style>
</head>
<body>

<!--1.添加模态框-->
<div id="addModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">添加用户</h4>
            </div>
            <div class="media-body">
                <form class="form-inline text-center" id="addForm">
                    <p>
                        <img src="../../images/goods/5.jpg" width="100px" >
                    </p>
                    <p>
                        　商品名:<input type="text" name="goodsName" class="form-control" placeholder="请输入商品名">
                    </p>
                    <p>
                        商品数量:<input type="text" name="goodsNum" class="form-control" placeholder="请输入商品数量">
                    </p>
                    <p>
                        商品价格:<input type="text" name="goodsPrice" class="form-control" placeholder="请输入商品价格">
                    </p>
                    <p>
                        商品图片:<input type="file" name="goodsImg" class="form-control" >
                    </p>
                    <p>
                        <button type="button" class="btn btn-primary" >确认修改</button>
                        <button type="button" class="btn btn-primary"  data-dismiss="modal">返回首页</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<!--2.修改模态框-->
<div id="updateModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">修改商品</h4>
            </div>
            <div class="media-body">
                <form class="form-inline text-center" id="updateForm">
                    <p>
                        <img src="../../images/goods/5.jpg" width="100px" >
                    </p>
                    <p>
                        　编　号:<input type="text" name="goodsId" class="form-control" placeholder="请输入商品编号">
                    </p>
                    <p>
                        　商品名:<input type="text" name="goodsName" class="form-control" placeholder="请输入商品名">
                    </p>
                    <p>
                        商品数量:<input type="text" name="goodsNum" class="form-control" placeholder="请输入商品数量">
                    </p>
                    <p>
                        商品价格:<input type="text" name="goodsPrice" class="form-control" placeholder="请输入商品价格">
                    </p>
                    <p>
                        商品图片:<input type="file" name="goodsImg" class="form-control" >
                    </p>
                    <p>
                        <button type="button" class="btn btn-primary" >确认添加</button>
                        <button type="button" class="btn btn-primary"  data-dismiss="modal">返回首页</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<!--3.上传模态框-->
<div id="upModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">上传文件</h4>
            </div>
            <div class="media-body">
                <form class="form-inline text-center">
                    <p style="margin-top: 20px">
                        选择文件:<input type="file" class="form-control" name="fileName">
                    </p>
                    <p>
                        <input type="button" value="开始上传" class="btn btn-primary">
                        <input type="button" value="返回首页" class="btn btn-primary" data-dismiss="modal">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
<!--4.主体内容-->
<div class="container-fluid">
    <div class="row" style="line-height: 60px">
        <form class="col-md-8 form-inline ">
            商品名称:
            <input type="text" placeholder="请输入商品名称" class="form-control" style="width:140px">
            　价格范围:
            <input type="number" placeholder="请输入价格" class="form-control" style="width:140px">
            -<input type="number" placeholder="请输入价格" class="form-control" style="width:140px">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>搜索</button>
        </form>

        <div class="navbar-right text-right" style="margin-right: 20px">
            <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>下载</a>
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#upModal"><span class="glyphicon glyphicon-upload"></span>上传</button>
            <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-remove-sign"></span>批量删除</button>
            <button type="button" class="btn btn-info " data-toggle="modal" data-target="#addModal"><span class="glyphicon glyphicon-plus"></span>添加</button>
        </div>
    </div>
    <div class="row">
        <table class="col-md-12 table-bordered text-center table-hover">
            <tr style="line-height:60px">
                <td><input type="checkbox">全选/全消</td>
                <td>编号</td>
                <td>商品名称</td>
                <td>商品数量</td>
                <td>商品价格</td>
                <td>商品图片</td>
                <td>商品销量</td>
                <td>商品类别</td>
                <td>状态(上/下架)</td>
                <td colspan="2">操作</td>
            </tr>

            <tr>
                <td>选择<input type="checkbox"></td>
                <td>1</td>
                <td>蜗牛10plus</td>
                <td>999 件</td>
                <td>1888.88 元</td>
                <td><img src="../../images/goods/2.jpg" width="60px" ></td>
                <td>10000 件</td>
                <td>手机</td>
                <td>上架</td>
                <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
            </tr>

           <tr>
                <td>选择<input type="checkbox"></td>
                <td>2</td>
                <td>蜗牛11plus</td>
                <td>999 件</td>
                <td>1888.88 元</td>
                <td><img src="../../images/goods/3.jpg" width="60px" ></td>
                <td>10000 件</td>
               <td>手机</td>
                <td>上架</td>
                <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
            </tr>

            <tr>
                <td>选择<input type="checkbox"></td>
                <td>3</td>
                <td>蜗牛12plus</td>
                <td>999 件</td>
                <td>1888.88 元</td>
                <td><img src="../../images/goods/4.jpg" width="60px" ></td>
                <td>10000 件</td>
                <td>手机</td>
                <td>上架</td>
                <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
            </tr>
        </table>
    </div>
    <div class="text-center">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../script/bootstrap.js"></script>
</body>
</html>